<template>
    <div class="MyDialog">
        <!--添加用户  -->
        <template v-if="$props.btnOption.txt==='添加用户'">
          <el-dialog 
          :title="$props.btnOption.txt" 
          :visible="$props.isShow"
          @close='handlyCancel()'
          >
            <el-form :model="addUserForm" :rules="addUserFormRules">
              <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
                <el-input v-model="addUserForm.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="addUserForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                <el-input v-model="addUserForm.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
                <el-input v-model="addUserForm.mobile" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handlyCancel()">取 消</el-button>
              <el-button type="primary" @click="handlyAddUser()">确 定</el-button>
            </div>
          </el-dialog>    
        </template>
        <!-- 修改用户 -->
        <template v-if="$props.btnOption.txt==='修改用户'">
          <el-dialog 
          :title="$props.btnOption.txt" 
          :visible="$props.isShow"
          @close='handlyCancel()'
          >
            <el-form :model="editUserForm" :rules="editUserFormRules">
              <el-form-item label="用户名:" :label-width="formLabelWidth">
                <el-input v-model="editUserForm.username" autocomplete="off" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="邮箱:" :label-width="formLabelWidth" prop="mobile">
                <el-input v-model="editUserForm.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号:" :label-width="formLabelWidth" prop="email">
                <el-input v-model="editUserForm.mobile" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handlyCancel()">取 消</el-button>
              <el-button type="primary" @click="handlyEditUser()">确 定</el-button>
            </div>
          </el-dialog>    
        </template> 
        <!-- 分配角色 -->
        <template v-if="$props.btnOption.txt==='分配角色'">
           <el-dialog 
          :title="$props.btnOption.txt" 
          :visible="$props.isShow"
          @close='handlyCancel()'
          >
            <el-form :model="editUserForm">
              <el-form-item label="当前的用户:" :label-width="formLabelWidth2">
                <span>{{$store.state.users.currentRow.username}}</span>
              </el-form-item>
              <el-form-item label="当前的角色:" :label-width="formLabelWidth2" >
                <span>{{$store.state.users.currentRow.role_name}}</span>
              </el-form-item>
              <el-form-item label="分配新角色:" :label-width="formLabelWidth2">
                <el-select v-model="formInline.rid" placeholder="请选择">
                  <el-option v-for=" (v,i) in $store.state.role.AllRoles" 
                  :key='i' 
                  :label="v.roleName" 
                  :value="v.id" ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handlyCancel()">取 消</el-button>
              <el-button type="primary" @click="handlyallotUser()">确 定</el-button>
            </div>
          </el-dialog>   
        </template>
        <!-- 分配权限 -->
         <template v-if="$props.btnOption.txt==='分配权限'">
           <el-dialog 
          :title="$props.btnOption.txt" 
          :visible="$props.isShow"
          @close='handlyCancel()'
          >
            <tree/>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handlyCancel()">取 消</el-button>
              <el-button type="primary" @click="handlyPrivileges()">确 定</el-button>
            </div>
          </el-dialog>   
         </template>
        <!-- 添加动态参数 -->
         <template v-if="$props.btnOption.txt==='添加动态参数'">
               <el-dialog 
              :title="$props.btnOption.txt" 
              :visible="$props.isShow"
              @close='handlyCancel()'
              >
              <el-form :model="addManyForm" :rules="addManyFormRules">
                  <el-form-item label="动态参数" :label-width="formLabelWidth" prop="many">
                    <el-input v-model="addManyForm.many" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="handlyCancel()">取 消</el-button>
                  <el-button type="primary" @click="handlyAddMany()">确 定</el-button>
              </div>
              </el-dialog>   
         </template>
        <!-- 添加静态属性 -->
         <template v-if="$props.btnOption.txt==='添加静态属性'">
               <el-dialog 
              :title="$props.btnOption.txt" 
              :visible="$props.isShow"
              @close='handlyCancel()'
              >
              <el-form :model="addOnlyForm" :rules="addManyFormRules">
                  <el-form-item label="静态属性" :label-width="formLabelWidth" prop="many">
                    <el-input v-model="addOnlyForm.only" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="handlyCancel()">取 消</el-button>
                    <el-button type="primary" @click="handlyAddOnly()">确 定</el-button>
                  </div>
              </el-dialog>   
         </template>
        <!-- 编辑动态参数 -->
         <template v-if="$props.btnOption.txt==='编辑动态参数'">
               <el-dialog 
              :title="$props.btnOption.txt" 
              :visible="$props.isShow"
              @close='handlyCancel()'
              >
                  <el-form :model="editManyForm" :rules="addManyFormRules">
                      <el-form-item label="动态参数" :label-width="formLabelWidth" prop="many">
                        <el-input v-model="editManyForm.many" autocomplete="off"></el-input>
                      </el-form-item>
                  </el-form> 
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="handlyCancel()">取 消</el-button>
                    <el-button type="primary" @click="handlyEditOnly()">确 定</el-button>
                  </div>
              </el-dialog>   
         </template>
        <!-- 添加分类 -->
        <template v-if="$props.btnOption.txt==='添加分类'">
          <el-dialog 
          :title="$props.btnOption.txt" 
          :visible="$props.isShow"
          @close='handlyCancel()'
          >
            <el-form :model="addClassifyForm" :rules="addClassifyFormRules">
              <el-form-item label="分类名称:" :label-width="formLabelWidth2" prop="attr_name">
                <el-input v-model="addClassifyForm.attr_name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="父级分类:" :label-width="formLabelWidth2" >
                  <goods-cat-2/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handlyCancel()">取 消</el-button>
              <el-button type="primary" @click="handlyAddClassify">确 定</el-button>
            </div>
          </el-dialog>    
        </template>
    </div>
</template>
<script>
import {getCheckedNodes} from '@/utils/comm'
export default {
    inject:['reload'],
    name:'myDialog',
    props:{
        btnOption:{
          type:Object
        },
        isShow:{
          type:Boolean
        },
       
    },
    data() {
        return {
          formLabelWidth: '80px',
          formLabelWidth2: '90px',
          //添加用户
             addUserForm: {
                username: 'jxw',
                password:'123456',
                email:'jinxinwei@qq.com',
                mobile:'1313131313'
            },
           //添加用户的验证
            addUserFormRules:{
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            },
          //修改用户
             editUserForm: {
                username:'',
                email:'',
                mobile:'',
                id:''
            },
          //修改用户验证
             editUserFormRules:{
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email:[
                  { required: true, message: '请输入邮箱', trigger: 'blur' },
                ]

            },

           //添加分类的验证
            addClassifyFormRules:{
                attr_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
          //分配角色
           formInline: {
             rid:'',
           },
           //添加动态参数
            addManyForm: {
                many: '',
            },
            //添加动态表格规则
            addManyFormRules: { 
                many:[
                    { required: true, message: '请输入参数名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            //编辑动态参数
            editManyForm: {
                many: '',
            },
             //添加静态属性
            addOnlyForm: {
                only: '',
            },
            //添加分类
            addClassifyForm: {
                attr_name: '',
            },
            
            
        }
    },
    methods:{
        //添加用户
        handlyAddUser(){
          this.handlyCancel()
          let data={...this.addUserForm};
          //console.log(data);
          this.$store.dispatch('users/Acs_postAddUser',data)
          .then(res=>{
            //判断是否最后一页添加一个用户
            let {pagination,paginationData}=this.$store.state.users;
            let {pagenum,pagesize}=pagination;
            let {total}=paginationData;
            if(pagenum===Math.ceil(total/pagesize)){
              this.$store.commit('users/ADD_USERS',res)
            };
          })
          .catch(
            err=>{
            console.log(err);
          }
          )
        },
        //取消按钮
        handlyCancel(){
            this.$emit('update:isShow',false);
            //this.$store.commit('role/CURRENTROLES_EXPANDED',[])
            this.addManyForm.many='';
            this.addOnlyForm.only='';
            this.addClassifyForm.attr_name='';
        },
        //修改用户
        handlyEditUser(){
          this.handlyCancel()
          let data=this.editUserForm;
          //console.log(data);
          this.$store.dispatch('users/Acs_putEditUser',data)
          .then(res=>{
              this.$store.dispatch('users/Acs_getUserList')
          })
        },
        //分配角色
        handlyallotUser(){
          this.handlyCancel()
          //console.log(data);
          let playload=this.formInline;
          this.$store.dispatch('users/Acs_putUserRole',playload)
        },
        //点击分配权限
        handlyPrivileges(){
          //配置参数
            let checkedNodes_str=getCheckedNodes(this.$store.state.role.tree.rootTree,'string');
            let checkedNodes_arr=getCheckedNodes(this.$store.state.role.tree.rootTree,'array');
            let data={rids:checkedNodes_str,roleId:this.$store.state.role.currentRoles.id}          
           //
          this.$store.dispatch('role/Acs_postUpdateRights',data)
            .then(res=>{
                //console.log(res);
                //关闭弹窗
                this.handlyCancel();
                //改变当前选中的节点
                this.$store.commit('role/CHANGE_CHEACKED_KEYS',checkedNodes_arr);
                //重新获取新的所有角色
                this.$store.dispatch('role/Acs_getAllRoles');
                this.$route.replace('/roles');
            })
            .catch(err=>{console.log(err);})
            this.reload();
          },
        //添加动态参数
        handlyAddMany(){
            let good_cat=this.$store.getters['goods/get_good_cat_length'];
            let id=Number(good_cat[good_cat.length-1])
            let data={
              id,
              attr_name:this.addManyForm.many,
              attr_sel: "many"
            }
            this.$store.dispatch('categorie/Acs_postCategories',data).then(res=>{
                    let data={id,sel:"many"};
                    this.$store.dispatch('categorie/Acs_getCategoriesAttributes',data)
                    .then(res=>{
                        this.$store.commit('goods/CHANGE_PARAMS_DATA',res);
                        this.addManyForm.many=''
                        })
                    .catch(err=>console.log(err))
            }).catch(err=>{console.log(err);})
            this.handlyCancel()
        },  
        //添加静态属性
        handlyAddOnly(){
            let good_cat=this.$store.getters['goods/get_good_cat_length'];
            let id=Number(good_cat[good_cat.length-1])
            let data={
              id,
              attr_name:this.addOnlyForm.only,
              attr_sel: "only"
            }
            this.$store.dispatch('categorie/Acs_postCategories',data).then(res=>{
                    let data={id,sel:"only"};
                    this.$store.dispatch('categorie/Acs_getCategoriesAttributes',data)
                    .then(res=>{
                        this.$store.commit('goods/CHANGE_PARAMS_DATA',res);
                        this.addOnlyForm.many=''
                        })
                    .catch(err=>console.log(err))
            }).catch(err=>{console.log(err);})
            this.handlyCancel()
        },
        //编辑动态参数
        handlyEditOnly(){
            let data={
              id:this.$store.state.goods.currentRow.cat_id,
              attrId:this.$store.state.goods.currentRow.attr_id,
              attr_name: this.editManyForm.many,
              attr_sel: "many"
            }
            this.$store.dispatch('categorie/Acs_putCategories',data)
            .then(res=>{
              console.log(res);
              let data={id:this.$store.state.goods.currentRow.cat_id,sel:"many"};
                    this.$store.dispatch('categorie/Acs_getCategoriesAttributes',data)
                    .then(res=>{
                        this.$store.commit('goods/CHANGE_PARAMS_DATA',res);
                        })
                    .catch(err=>console.log(err))
                })
            .catch(err=>console.log(err)) 
            this.handlyCancel()
        },
        //添加分类
        handlyAddClassify(){
           //一级菜单
           //console.log(this.$store.state.goods.goods_cat);
          const AddCategories=(data)=>{
              this.$store.dispatch('categorie/Acs_postAddCategories',data).then(res=>{
                  this.$store.dispatch('categorie/Acs_getCategories')
                      .then(res=>{
                          this.$store.commit('categorie/CHANGE_CATEGORIES_DATA',res)
                          this.handlyCancel();
                      }).catch(err=>{console.log(err);})
                  }).catch(err=>{console.log(err);})
          }
          let length=this.$store.state.categorie.goods_cat.length;
          console.log(length);
            if (length===0) {
                let data={
                  cat_pid:0,
                  cat_name:this.addClassifyForm.attr_name,
                  cat_level:length
                }
                AddCategories(data);
            }
            if (length===1) {
                let data={
                  cat_pid:this.$store.state.categorie.goods_cat[0],
                  cat_name:this.addClassifyForm.attr_name,
                  cat_level:length
                }
                  AddCategories(data);

            }
            if (length===2) {
                let data={
                  cat_pid:this.$store.state.categorie.goods_cat[1],
                  cat_name:this.addClassifyForm.attr_name,
                  cat_level:length
                }
                AddCategories(data);
            } 
        }
    },
    mounted(){
       
    },
    watch:{
      '$store.state.users.currentRow':{
       handler:function(newval,oldval){
         if(newval&&this.$props.btnOption.txt==='修改用户'){
            this.editUserForm.username=newval.username;
            this.editUserForm.mobile=newval.mobile;
            this.editUserForm.email=newval.email;
            this.editUserForm.id=newval.id;
         }
      },
      deep:true
    },
    '$store.state.goods.currentRow':{
       handler:function(newval,oldval){
         if(newval&&this.$props.btnOption.txt==='编辑动态参数'){
           //console.log(newval);
            this.editManyForm.many=newval.attr_name;
           
         }
      },
      deep:true,
      immediate:true
    },
     
     
    //  '$store.state.role.AllRoles':{
    //    handler:function(newval,oldval){
    //      if(newval&&this.$props.btnOption.txt==='分配角色'){
           
    //         this.formInline=newval;
    //         console.log(this.formInline);
    //      }
    //   },
    //   deep:true
    // }, 
    }
           
}
</script>
<style lang="scss" scope>
    .MyDialog{
      display: inline-block;
    }
</style>